<template>
    <div class="big">


        <!-- 搜索框 -->
        <div class="searchBox">
            <van-search placeholder="请输入搜索关键词" v-model="keyword" @click="toSearch"/>
        </div>

        <!-- 导航栏 -->
        <div class="top flex">
            <span>综合</span>
            <span>价格
                <!-- <van-icon name="arrow-up" />
                <van-icon name="arrow-down" /> -->
            </span>
            <span>分类</span>
        </div>
        <div class="content flex">
            <div class="item_container_item" v-for="item in directlyList" :key="item.id" @click="toDetail(item.id)">
                <img class="bigImg"
                    :src="item.listPicUrl"/>
                <div class="item_title">
                    <span>{{ item.name }}</span>
                </div>
                <div class="price_old_now">
                    <span class="price_now">{{ '￥' + item.retailPrice }}</span>
                    <span class="price_old"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { goodsList } from '@/api/search'
import { useRouter,useRoute } from 'vue-router';
const route = useRoute()
const router = useRouter()
const directlyList = ref<any[]>([])
const keyword = ref(route.query.word as string)
const toSearch = () => {
    router.push('search')
}

// 跳转详情页
const toDetail = (id:string) => {
    router.push(`/goodsdetail/${id}`)
}

// 获取商品列表的功能函数
const getGoodsList = async() => {
    try {
        let res = await goodsList(keyword.value)
        directlyList.value = res.data.data.directlyList
        console.log(directlyList.value)
    } catch (error) {
        
    }
}

onMounted(() => {
    getGoodsList()
})

</script>

<style scoped lang="less">
.flex {
    display: flex;
}

.top {
    justify-content: space-around;

    span {
        line-height: 47px;
        font-size: 17px;
    }

    border-bottom: 1px solid #ccc;
}
.content {
        justify-content: space-around;
        flex-wrap: wrap;
        border-bottom: 1px solid #999999;
        padding: 6px;
        .item_container_item {
            background-color: #f4f4f4;
            margin-bottom: 20px;
            .bigImg {
                height: 172.5px;
                width: 172.5px;
                border-radius: 3%;
            }
            div {
                width: 172.5px;
            }
            .item_title {
                line-height: 20px;
                font-size: 15px;


                img {
                    height: 16px;
                    margin-right: 5px;
                    vertical-align: middle;
                }

                span {
                    color: #444444;
                }
            }

            .item_red {
                width: 70px;
                height: 18px;
                background: #eee;
                border-radius: 30%;
                border: 1px solid #eee;
                margin: 5px 0;

                img {
                    height: 10px;
                    width: 10px;
                }

                span {
                    display: block;
                    font-size: 12px;
                    text-align: center;
                    margin: 0 2px;
                }
            }

            .price_old_now {
                margin: 10px 0;

                .price_old {
                    color: #999999;
                    text-decoration: line-through;
                    font-size: 12px;
                }

                .price_now {
                    color: red;
                    font-size: 18px;
                    font-weight: bold;
                }

                .get_to {
                    color: red;
                    font-size: 14px;
                }
            }

            .full {
                background: red;
                height: 19px;
                width: 74.7px;
                border-radius: 24px;

                span {
                    text-align: center;
                    font-size: 12px;
                    margin: 0 auto;
                    display: block;
                }
            }
        }

        &:after {
            content: '';
            width: 172.5px;
        }
    }
</style>